<template>
    <div class="chart-demo-container">
        <div class="demo-header">
            <h1>折线图组件示例</h1>
            <p>展示如何使用新的动态配置 LineChart 组件创建各种折线图</p>
        </div>

        <div class="demo-section">
            <h2>基础折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="basicData" :series="basicSeries" title="基础折线图" :height="300" :smooth="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>多指标折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="multiData" :series="multiSeries" title="访问统计趋势" :height="300" :showLegend="true"
                    :smooth="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>自定义坐标轴配置</h2>
            <div class="chart-wrapper">
                <LineChart :data="customAxisData" :series="customAxisSeries" :xAxis="customXAxis" :yAxis="customYAxis"
                    title="自定义坐标轴" :height="300" :showLegend="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>带区域填充的折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="areaData" :series="areaSeries" title="区域填充折线图" :height="300" :showArea="true"
                    :smooth="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>平滑效果对比</h2>
            <div class="chart-comparison">
                <div class="chart-item">
                    <h3>不平滑曲线</h3>
                    <LineChart :data="basicData" :series="basicSeries" title="不平滑" :height="250" :smooth="false" />
                </div>
                <div class="chart-item">
                    <h3>平滑曲线</h3>
                    <LineChart :data="basicData" :series="basicSeries" title="平滑" :height="250" :smooth="true" />
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>带数据标签的折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="labelData" :series="labelSeries" title="数据标签折线图" :height="300" :showLabel="true"
                    :smooth="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>可缩放的折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="zoomData" :series="zoomSeries" title="可缩放折线图" :height="300" :enableZoom="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>自定义样式的折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="customData" :series="customSeries" title="自定义样式折线图" :height="300" :showGrid="false"
                    :showLegend="false" :smooth="false" :showToolbox="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>动态数据折线图</h2>
            <div class="chart-wrapper">
                <LineChart :data="dynamicData" :series="dynamicSeries" title="动态数据折线图" :height="300" />
                <div class="controls">
                    <el-button @click="addData">添加数据</el-button>
                    <el-button @click="removeData">删除数据</el-button>
                    <el-button @click="updateData">更新数据</el-button>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>配置面板</h2>
            <div class="config-panel">
                <el-form :model="config" label-width="120px">
                    <el-form-item label="图表标题">
                        <el-input v-model="config.title" placeholder="输入图表标题" />
                    </el-form-item>
                    <el-form-item label="图表高度">
                        <el-input-number v-model="config.height" :min="200" :max="800" />
                    </el-form-item>
                    <el-form-item label="显示网格">
                        <el-switch v-model="config.showGrid" />
                    </el-form-item>
                    <el-form-item label="显示数据标签">
                        <el-switch v-model="config.showLabel" />
                    </el-form-item>
                    <el-form-item label="显示图例">
                        <el-switch v-model="config.showLegend" />
                    </el-form-item>
                    <el-form-item label="启用缩放">
                        <el-switch v-model="config.enableZoom" />
                    </el-form-item>
                    <el-form-item label="显示区域填充">
                        <el-switch v-model="config.showArea" />
                    </el-form-item>
                    <el-button @click="updateConfigData">更新配置数据</el-button>
                </el-form>
            </div>
            <div class="chart-wrapper">
                <LineChart :data="configData" :series="configSeries" :title="config.title" :height="config.height"
                    :showGrid="config.showGrid" :showLabel="config.showLabel" :showLegend="config.showLegend"
                    :enableZoom="config.enableZoom" :showArea="config.showArea" :smooth="config.smooth"
                    :showToolbox="config.showToolbox" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { LineChart } from '@/components/charts'

// 基础数据
const basicData = ref([
    { name: '1月', value: 120 },
    { name: '2月', value: 180 },
    { name: '3月', value: 220 },
    { name: '4月', value: 150 },
    { name: '5月', value: 280 },
    { name: '6月', value: 320 }
])

// 基础系列配置
const basicSeries = ref([
    { key: 'value', name: '销售额', color: '#409eff' }
])

// 多指标数据
const multiData = ref([
    { name: '8月23日', pv: 0, uv: 0, uip: 0 },
    { name: '8月24日', pv: 0, uv: 0, uip: 0 },
    { name: '8月25日', pv: 0, uv: 0, uip: 0 },
    { name: '8月26日', pv: 0, uv: 0, uip: 0 },
    { name: '8月27日', pv: 0, uv: 0, uip: 0 },
    { name: '8月28日', pv: 4, uv: 1, uip: 3 },
    { name: '8月29日', pv: 7, uv: 1, uip: 3 },
    { name: '8月30日', pv: 2, uv: 1, uip: 1 }
])

// 多指标系列配置
const multiSeries = ref([
    { key: 'pv', name: '访问量(PV)', color: '#409eff', symbol: 'circle' },
    { key: 'uv', name: '访客数(UV)', color: '#67c23a', symbol: 'diamond' },
    { key: 'uip', name: 'IP数(UIP)', color: '#e6a23c', symbol: 'triangle' }
])

// 自定义坐标轴数据
const customAxisData = ref([
    { time: '00:00', temperature: 18, humidity: 65 },
    { time: '06:00', temperature: 22, humidity: 58 },
    { time: '12:00', temperature: 28, humidity: 45 },
    { time: '18:00', temperature: 25, humidity: 52 },
    { time: '24:00', temperature: 20, humidity: 62 }
])

// 自定义坐标轴系列配置
const customAxisSeries = ref([
    { key: 'temperature', name: '温度(°C)', color: '#f56c6c' },
    { key: 'humidity', name: '湿度(%)', color: '#67c23a' }
])

// 自定义横坐标配置
const customXAxis = ref({
    name: '时间',
    type: 'category',
    axisLabel: {
        rotate: 45,
        color: '#666'
    }
})

// 自定义纵坐标配置
const customYAxis = ref({
    name: '数值',
    type: 'value',
    min: 0,
    max: 100
})

// 区域填充数据
const areaData = ref([
    { name: '周一', value: 820 },
    { name: '周二', value: 932 },
    { name: '周三', value: 901 },
    { name: '周四', value: 934 },
    { name: '周五', value: 1290 },
    { name: '周六', value: 1330 },
    { name: '周日', value: 1320 }
])

// 区域填充系列配置
const areaSeries = ref([
    { key: 'value', name: '访问量', color: '#67c23a' }
])

// 数据标签数据
const labelData = ref([
    { name: 'Q1', value: 45 },
    { name: 'Q2', value: 78 },
    { name: 'Q3', value: 92 },
    { name: 'Q4', value: 65 }
])

// 数据标签系列配置
const labelSeries = ref([
    { key: 'value', name: '季度数据', color: '#e6a23c' }
])

// 缩放数据
const zoomData = ref([
    { name: '00:00', value: 10 },
    { name: '02:00', value: 15 },
    { name: '04:00', value: 8 },
    { name: '06:00', value: 25 },
    { name: '08:00', value: 45 },
    { name: '10:00', value: 38 },
    { name: '12:00', value: 52 },
    { name: '14:00', value: 48 },
    { name: '16:00', value: 35 },
    { name: '18:00', value: 42 },
    { name: '20:00', value: 30 },
    { name: '22:00', value: 18 }
])

// 缩放系列配置
const zoomSeries = ref([
    { key: 'value', name: '实时数据', color: '#f56c6c' }
])

// 自定义样式数据
const customData = ref([
    { name: 'A', value: 100 },
    { name: 'B', value: 200 },
    { name: 'C', value: 150 },
    { name: 'D', value: 300 },
    { name: 'E', value: 250 }
])

// 自定义样式系列配置
const customSeries = ref([
    {
        key: 'value',
        name: '自定义数据',
        color: '#9c27b0',
        lineStyle: { width: 5, type: 'dashed' },
        itemStyle: { borderWidth: 4 }
    }
])

// 动态数据
const dynamicData = ref([
    { name: '第1天', value: Math.floor(Math.random() * 100) },
    { name: '第2天', value: Math.floor(Math.random() * 100) },
    { name: '第3天', value: Math.floor(Math.random() * 100) },
    { name: '第4天', value: Math.floor(Math.random() * 100) },
    { name: '第5天', value: Math.floor(Math.random() * 100) }
])

// 动态系列配置
const dynamicSeries = ref([
    { key: 'value', name: '动态数据', color: '#ff9800' }
])

// 配置数据
const configData = ref([
    { name: '项目A', value: 85 },
    { name: '项目B', value: 92 },
    { name: '项目C', value: 78 },
    { name: '项目D', value: 95 },
    { name: '项目E', value: 88 }
])

// 配置系列配置
const configSeries = ref([
    { key: 'value', name: '项目评分', color: '#409eff' }
])

// 配置对象
const config = reactive({
    title: '配置示例折线图',
    height: 350,
    showGrid: true,
    showLabel: false,
    showLegend: true,
    enableZoom: false,
    showArea: false,
    smooth: true,
    showToolbox: false
})

// 添加数据
const addData = () => {
    const newIndex = dynamicData.value.length + 1
    const newValue = Math.floor(Math.random() * 100)
    dynamicData.value.push({
        name: `第${newIndex}天`,
        value: newValue
    })
}

// 删除数据
const removeData = () => {
    if (dynamicData.value.length > 1) {
        dynamicData.value.pop()
    }
}

// 更新数据
const updateData = () => {
    dynamicData.value.forEach(item => {
        item.value = Math.floor(Math.random() * 100)
    })
}

// 更新配置数据
const updateConfigData = () => {
    configData.value.forEach(item => {
        item.value = Math.floor(Math.random() * 100)
    })
}
</script>

<style scoped>
.chart-demo-container {
    padding: 24px;
    background: #f5f7fa;
    min-height: 100vh;
}

.demo-header {
    text-align: center;
    margin-bottom: 32px;
}

.demo-header h1 {
    color: #303133;
    margin-bottom: 8px;
}

.demo-header p {
    color: #606266;
    font-size: 16px;
}

.demo-section {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
    color: #303133;
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

.chart-wrapper {
    margin-bottom: 20px;
}

.chart-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-item {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chart-item h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
}

.controls {
    margin-top: 16px;
    text-align: center;
}

.controls .el-button {
    margin: 0 8px;
}

.config-panel {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.config-panel .el-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.config-panel .el-form-item {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .chart-demo-container {
        padding: 16px;
    }

    .demo-section {
        padding: 16px;
    }

    .config-panel .el-form {
        grid-template-columns: 1fr;
    }

    .chart-comparison {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
</style>
